<template>
  <div class="container">
    <!-- 左侧导航 -->
    <div class="goods-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="(item, index) in goodList"
          :key="index"
          @click="changeScorll(index)"
        />
      </van-sidebar>
    </div>
    <!-- 右侧商品详情 -->
    <div class="goods-right">
      <div>
        <!-- 第一层循环分类 标签 -->
        <div
          class="cate"
          v-for="(item, index) in goodList"
          :key="index"
          :id="index"
        >
          <h2>{{ item.name }}</h2>
          <!-- 第二层循环 该分类商品循环 -->
          <div class="detail" v-for="i in item.foods" :key="i.id">
            <!-- 点击图片跳转  拿走goods信息 保存到vuex -->
            <img @click="todetail(i)" :src="i.imgUrl" />
            <div class="right">
              <strong>{{ i.name }}</strong>
              <p>{{ i.goodsDesc }}</p>
              <h3>{{ i.price }}</h3>
              <!-- 购物车加减 -->
              <div class="shopcar">
                <button v-if="i.num > 0" @click="addGoods(i.id, -1)">-</button>
                <span v-if="i.num > 0">{{ i.num }}</span>
                <button @click="addGoods(i.id, +1)">+</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// 丝滑滚动条
import BScroll from "better-scroll";
// 商品分类
interface goodsInfo {
  foods: [everyfoods]; // 分类的商品
  name: string; //分类名
}
// 商品对象
interface everyfoods {
  category: string;
  ctime: string;
  goodsDesc: string;
  id: number;
  imgUrl: string;
  name: string;
  price: number;
  rating: number;
  ratings: [everyRatings];
  sellCount: number;
}
// 评价
interface everyRatings {
  avatar: string;
  rateTime: number;
  rateType: number;
  text: string;
  username: string;
}

@Component
export default class extends Vue {
  // 数据
  activeKey: number = 0; // 侧边栏激活的索引

  leftsc: any;
  rightsc: any;
  // 定义一个装 所有dom高度的数组
  divHeightArr: Array<any> = [];

  // 方法
  async created(): Promise<void> {
    // 派发我们的Action 请求GoodsList数据 获取商品列表
    this.$store.dispatch("UPDATE_GOODLIST");
    console.log(this.$store.state.goodsList);

    // 通过$nextTick获取更新后的dom
    this.$nextTick(() => {
      // 设置个延时器  可能获取不到最新dom settimeout延迟之后获取dom
      setTimeout(() => {
        // 循环goodList 获取dom
        this.goodList.forEach((item, index) => {
          //  拿到每个dom把高度添加到数组
          this.divHeightArr.push(
            // querySelector这个方法有缺失，不能选择数字或者特殊字符串的选择器
            // 如果需要特殊字符串这种就可以使用getElementBy系列的方法
            document.getElementById(index + "")?.offsetHeight
            // 链式判断  ?.es6语法需要安装bable才能用
          );
        });
      }, 200);
    });
  }
  // 用计算属性去取store中的state数据
  get goodList(): Array<goodsInfo> {
    return this.$store.state.goodsList;
  }

  mounted() {
    this.leftsc = new BScroll(".goods-left", {
      click: true,
    });
    this.rightsc = new BScroll(".goods-right", {
      click: true,
      probeType: 3,
    });

    //监听 scroll事件 右边根据高度变化  变换index值
    this.rightsc.on("scroll", (pos: any) => {
      let total: number = 0;
      // 获取dom实时高度 滚动的高度_y
      let _y = Math.abs(pos.y);
      // console.log(_y);

      for (let i = 0; i < this.divHeightArr.length; i++) {
        // 前面div高度要相加  然后判断滚动到_y位置是否在 目标范围内
        if (total <= _y && _y < total + this.divHeightArr[i]) {
          this.activeKey = i;
          break; // 满足条件不比再循环
        }
        total += this.divHeightArr[i];
      }
    });
  }
  // 左右导航关联
  changeScorll(index: string): void {
    // 左联右
    this.rightsc.scrollToElement(document.getElementById(index + ""), 500);
  }

  // 购物车添加商品

  addGoods(id: number, num: number): void {
    this.$store.commit("ADD_GOOD_TOCAR", { id, num });
  }



  // 点击图片跳转详情页页面
  todetail(i:any):void{
    this.$store.commit('GET_GOODS_DETAIL',i)
   this.$router.push('/goods-detail')
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  .goods-left {
    overflow: scroll;
    width: 120px;
    height: 100%;
    &::-webkit-scrollbar {
      display: none;
    }
    .van-sidebar {
      width: 120px;
    }
  }
  .goods-right {
    overflow: scroll;
    flex: 1;
    height: 100%;
    &::-webkit-scrollbar {
      display: none;
    }
    .cate {
    }
    .detail {
      display: flex;
      padding: 10px;
      .shopcar{
        display: flex;
        align-items: center;
        button{
          border-radius: 50%;
          width: 30px;
          height: 30px;
          background: #f60;
          border: none;
          color: #fff;
          margin: 0 5px;
        }
      }
      img {
        border-radius: 3px;
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-right: 15px;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
</style>